<template>
    <div>
        <div class="container e-m-h-auto e-m-b-15">
            <el-page-header @back="goBack" content="站点详情"></el-page-header>
            <div class="flex">
                <!-- 基本信息 -->
                <div class="e-flex-1">
                    <div class="details-head e-m-t-30">
                        <span class="title e-m-r-15">{{ form.name }}</span>
                        <el-tag type="success" size="mini" v-if="form.usestate == '已启用'">营业中</el-tag>
                        <el-tag type="danger" size="mini" v-else>关闭</el-tag>
                    </div>
                    <div class="details-body e-m-t-15">
                        <div class="cell">所属加盟商：{{ form.franchisename || '--'}}</div>
                        <el-divider direction="vertical"></el-divider>
                        <div class="cell">地址：{{ form.address.address }}</div>
                        <el-divider direction="vertical"></el-divider>
                        <div class="cell">所属地区：{{ form.address.citynames }}</div>
                    </div>
                    <!-- <div class="details-body e-m-t-15">
                        <div class="cell">负责人：<span class="color-main">{{ form.manager.name || '--' }}</span><i class="el-icon-edit color-main"></i></div>
                        <el-divider direction="vertical"></el-divider>
                        <div class="cell">联系电话：{{ form.manager.mobile || '--' }}</div>
                    </div> -->
                    <div class="e-m-t-20">
                        <el-button type="primary" icon="el-icon-edit" plain @click="dialogVisible = true">编辑站点信息</el-button>
                        <el-button type="" icon="el-icon-open" plain @click="setState(form.usestate)">{{ form.usestate == '已启用'?'设置站点关闭':'设置站点营业' }}</el-button>
                        <!-- 编辑站点信息 -->
                        <create-or-edit :dialog-visible.sync="dialogVisible" :storeId="id" @submit="submitType" @close="dialogVisible = false"></create-or-edit>
                    </div>
                </div>
                <!-- 充值&提现 -->
                <!-- <div class="recharge-withdrawal-box">
                    <div class="item">
                        <div class="flex align-items-center">
                            <div class="e-flex-1">
                                <div class="e-m-b-5">可用余额</div>
                                <div v-if="form.balance > 0">
                                    <span class="num">{{ utils.formatMoney(form.balance) }}</span><small>元</small>
                                </div>
                                <div v-else-if="form.balance == null">
                                    <span class="num">不限金额</span>
                                </div>
                            </div>
                            <div class="e-p-l-60">
                                <el-button type="primary" class="e-w-120">充值</el-button>
                                <el-button type="" class="e-w-120">提现</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="flex align-items-center">
                            <div>
                                <div class="flex align-items-center">
                                    <i class="iconfont icon-qianbao"></i>
                                    <div class="e-flex-1">
                                        <div class="">已付金额</div>
                                        <span class="text">{{ utils.formatMoney(form.amount) }}</span><small>元</small>
                                    </div>
                                </div>
                            </div>
                            <div class="e-flex-1 text-center">
                                <div class="divider"></div>
                            </div>
                            <div>
                                <div class="flex align-items-center">
                                    <i class="iconfont icon-dongjiezijin"></i>
                                    <div class="e-flex-1">
                                        <div class="">预留现金</div>
                                        <span class="text">{{ utils.formatMoney(form.cash) }}</span><small>元</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
        <div class="container e-m-h-auto e-m-b-15">
            <div class="type-state e-m-b-30">
                <span v-for="(item, index) in typeArr" :key="index" :class="{ 'on': typeId == item.value }" @click="typeId = item.value">{{ item.name }}</span>
            </div>
            <!-- 基本信息 -->
            <!-- <div class="container-item" v-if="typeId == 1">
                <div class="admin-statistics-content e-m-t-15">
                    <div class="item e-flex-1">
                        <label>站点余额</label>
                        <div><span class="num">{{utils.formatMoney(1316.56)}}</span><small>元</small></div>
                    </div>
                    <div class="item e-flex-1">
                        <label>入库重量</label>
                        <div><span class="num">3069</span><small>KG</small></div>
                    </div>
                    <div class="item e-flex-1">
                        <label>入库件数</label>
                        <div><span class="num">0</span><small>件</small></div>
                    </div>
                    <div class="item e-flex-1">
                        <label>订单数</label>
                        <div><span class="num">102</span><small>条</small></div>
                    </div>
                    <div class="item e-flex-1">
                        <label>服务人次</label>
                        <div><span class="num">1589</span><small>次</small></div>
                    </div>
                    <div class="item e-flex-1">
                        <label>库存</label>
                        <div><span class="num">31032</span><small>KG</small>/<span class="num">1</span><small>件</small></div>
                    </div>
                </div>

                <h4>库存统计</h4>
            </div> -->
            <!-- 入库订单 -->
            <div class="container-item" v-if="typeId == 2">
                <store-InOrder-list :storeId="id"></store-InOrder-list>
            </div>
            <!-- 出库订单 -->
            <div class="container-item" v-if="typeId == 3">
                <store-outOrder-list :storeId="id"></store-outOrder-list>
            </div>
            <!-- 站点库存 -->
            <div class="container-item" v-if="typeId == 4">
                <el-button @click="downloadwithdrawa()" style="margin-bottom:30px; margin-top: 1px;" type="primary" plain><i class="iconfont icon-excel"></i>导出Excel</el-button>
                <inventory-table :storeId="id"></inventory-table>
            </div>
            <!-- 收支管理 -->
            <!-- <div class="container-item" v-if="typeId == 7">
                <income-payout-list :storeId="id"></income-payout-list>
            </div> -->
            <!-- 店员管理 -->
            <div class="container-item" v-if="typeId == 8">
                <store-staff-list :storeId="id" :franchiseid="form.franchiseid"></store-staff-list>
            </div>
            <!-- 站点订单 -->
            <div class="container-item" v-if="typeId == 5">
                <!-- 站点订单 -->
                <offlineOrderList :franchiseId="form.franchiseid" :storeId="id" :insidePage="false"></offlineOrderList>
            </div>
            <!-- 现金记录 -->
            <div class="container-item" v-if="typeId == 9">
                <store-cash-list :storeId="id" :franchiseid="form.franchiseid"></store-cash-list>
            </div>
        </div>
    </div>
</template>

<script>
    import createOrEdit from '@/components/site-list/createOrEdit.vue';
    import offlineOrderList from '@/components/order-user-list/offline-order-list.vue';
    export default {
        layout: 'admin',
        components:{
            createOrEdit,
            offlineOrderList
        },
        head() {
            return {
                title: '站点详情' 
            }
        },
        data() {
            return {
                dialogVisible: false,
                id: 0,
                form:{
                    address: {}
                },
                typeArr: [
                    // {
                    //     name: '数据统计',
                    //     value: 1
                    // },
                    {
                        name: '站点库存',
                        value: 4
                    },
                    {
                        name: '店员管理',
                        value: 8
                    },
                    {
                        name: '回收订单',
                        value: 5
                    },
                    {
                        name: '入库订单',
                        value: 2
                    },
                    {
                        name: '出库订单',
                        value: 3
                    },
                    {
                        name: '现金记录',
                        value: 9
                    },
                    // {
                    //     name: '收支管理',
                    //     value: 7
                    // }
                ],
                typeId: 4,
                // total: 0,
                // pageIndex: 1,
                // pageSize: 10,
                // tableData: [],
                // tableColumns: [
                //     { 
                //         prop: 'name', 
                //         label: '姓名',
                //     },
                //     { 
                //         prop: 'mobile', 
                //         label: '电话'
                //     },
                //     { 
                //         prop: 'lastlogindatetime', 
                //         label: '最后登录时间',
                //         width: '200px'
                //     },
                //     {
                //         prop: 'ismanager',
                //         label: '是否管理员',
                //         formatter: row => {
                //             return row.ismanager ? '是' : '否'
                //         }
                //     }
                // ],
                // tableActions: [
                //     { 
                //         name: 'administrators', 
                //         label: '设置管理员',
                //         visible: row => !row.ismanager
                //     },
                //     { 
                //         name: 'acdelete', 
                //         label: '离职'
                //     },
                //     {
                //         name: 'edit',
                //         label: '编辑'
                //     }
                // ],
            }
        },
        mounted() {
            this.id = Number(this.$route.query.id)
            this.getDetails()
            // this.getList()
        },
        methods:{
            goBack() {
                this.$router.go(-1)
            },
            getDetails() {
                this.loading = true
                this.$axios.get('/Store/Details?id=' + this.id).then((res) => {
                    this.form = res
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            // goOrderView(id,orderType) {
            //     if(orderType == 1){
            //         this.$router.push({
            //             path:'/order/brother/Views?id=' + id
            //         })
            //     }else{
            //         this.$router.push({
            //             path:'/order/brother/fitViews?id=' + id
            //         })
            //     }
            // },
            // getList() {
            //     this.$axios.post('/Store/staff/List', {
            //         "PageIndex": this.pageIndex,
            //         "pageSize": this.pageSize,
            //         "Key": this.key,
            //         "storeId": this.id
            //     }).then((res) => {
            //         console.log(res)

            //         this.tableData = res.rows;
            //         this.total = res.total;
            //     }).catch(() => {
            //     })
            // },
            // // 翻页操作处理
            // handlePagination({ pageIndex, pageSize }) {
            //     this.pageIndex = pageIndex
            //     this.pageSize = pageSize
            //     this.getList(false) // 获取新数据
            // },
            // // 操作按钮点击事件
            // handleTableAction({ action, row, event }) {
            //     switch(action) {
            //         case 'administrators':
            //             this.administrators(row.id)
            //         break
            //         case 'acdelete':
            //             this.acdelete(row.id)
            //         break
            //         case 'edit':
            //             // this.distribution(row,true)
            //         break
            //     }
            // },
            // administrators(id) {
            //     this.$confirm('此操作将该员工设置为管理员, 是否继续?', '提示', {
            //         confirmButtonText: '确定',
            //         cancelButtonText: '取消',
            //         type: 'warning'
            //     }).then(() => {
            //         this.$axios.post(`/Admin/store/staff/SetManager?storeId=${this.$route.query.id}&staffId=${id}`).then((res) => {
            //             console.log(res)
            //             this.getList()
            //         })
            //     }).catch(() => {
            //         this.$message({
            //             type: 'info',
            //             message: '已取消删除'
            //         });
            //     });
            // },
            // acdelete(id) {
            //     this.$confirm('此操作将该员工离职, 是否继续?', '提示', {
            //         confirmButtonText: '确定',
            //         cancelButtonText: '取消',
            //         type: 'warning'
            //     }).then(() => {
            //         this.$axios.post(`/Admin/Store/Staff/Remove?storeId=${this.$route.query.id}&staffId=${id}`).then((res) => {
            //         console.log(res)
            //         this.$message({
            //             message: '删除成功',
            //             type: 'error'
            //         });
            //         this.getList()
            //     })
            //     }).catch(() => {

            //     });
            // },
            downloadwithdrawa() {
				this.$axios.post('/Statistics/ListStockDownload', {
					"storeId": this.id,
				}, {
					responseType: 'blob'
				}).then(res => {
					console.log(res)
					let content = res;
					let fileName = this.form.name+'库存表.xls'
					this.utils.saveAndExport(content, fileName)
				})
			},
            submitType(form) {
                this.loading = true
                this.$axios.post('/Store/Edit',form).then((res) => {
                    this.$message.success(res.msg);
                    this.dialogVisible = false;
                    this.loading = false
                    this.getDetails()
                }).catch((err) => {
                    this.loading = false
                })
            },
            setState(value) {
                let usestate = ''
                let tipsTxt = ''
                if (value == '已冻结') {
                    usestate = 2
                    tipsTxt = '此操作将开启站点, 是否继续?'
                } else {
                    usestate = 1
                    tipsTxt = '此操作将关闭站点, 是否继续?'
                }

                this.$confirm(tipsTxt, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post('/Store/SetState', { ids: [this.id], state: usestate }).then(res => {
                        console.log(res)
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        this.getDetails()
                    })
                }).catch(() => {
                    // this.$message({
                    //     type: 'info',
                    //     message: '已取消删除'
                    // });
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
    .recharge-withdrawal-box{
        // width: 400px;
        background: #e6fbfb;
        border: 1px solid #9aeeef;
        padding: 15px 30px;
        display: flex;
        flex-direction: column;
        color: var(--secondary);
        .item{
            flex: 1;
            display: flex;
            align-items: center;
            border-bottom: 1px dashed var(--border-light);
            padding-bottom: 15px;
            margin-bottom: 15px;
            &:last-child{
                border: 0;
                padding: 0;
                margin: 0;
            }
            .num{
                font-size: 32px;
                font-weight: bold;
                color: var(--orange);
            }
            .text{
                color: var(--dark);
                font-size: 20px;
            }
            .iconfont{
                font-size: 46px;
                margin-right: 15px;
                color: var(--grey);
            }
        }
        .divider{
            border-left: 1px solid var(--border-light);
            height: 40px;
            display: inline-block;
        }
        .flex{
            width: 100%;
        }
    }
    .details-head{
        .title{
            font-size: 20px;
        }
    }
    .details-body{
        display: flex;
        align-items: center;
        color: var(--secondary);
        font-size: 13px;
        .cell{
            margin-right: 10px;
            margin-left: 10px;
            &:first-child{
                margin-left: 0;
            }
        }
    }
    .admin-statistics-content {
        display: flex;
        background-color: #fff;
        padding: 15px;
        border: 1px solid var(--border-light);
        // border-radius: 4px;

        .item {
            &+.item {
                border-left: 1px solid var(--border-light);
                padding-left: 30px;
            }

            .icon {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                border: 1px solid var(--light);
                background-color: #f2f3f5;
                padding: 5px;
                margin: 0 20px 0 0;
                box-shadow: 3px 2px 11px 0 rgb(70 70 70 / 22%);
            }

            label {
                color: var(--grey);
                font-size: 12px;
                margin-bottom: 5px;
                display: block;
            }

            .num {
                font-size: 30px;
            }
        }
    }
    .type-state{
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 98;
    }
</style>